<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hi+海家未知旅行计划</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/api.css"/>
    <link rel="stylesheet" type="text/css" href="__CSS__/aui.css"/>
    <style>
        html{
            font-family: "Helvetica Neue", Helvetica, sans-serif;
            font-size: 20px;
        }
        * {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
            outline: none;
        }
        body:before {
            content: ' ';
            position: fixed;
            z-index: -1;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: url('__IMAGE__/lvyou/bg.png') center 0 no-repeat;
            background-size: cover;
        }
        body{
            width: 100%;
            height: 100%;
            margin: 0;
        }
        .select{
            color: #8FEBE8;
            font-size: 0.8rem;
            text-align: center;margin-top: 2rem;
        }
        .all_img{
            height: 100%;
            width: 100%;
            padding: 1rem 15%;
        }
        .all_img img{
            height: 5rem;
            width: 5rem;
            border-radius: 0.5rem;
            margin-bottom: 1.5rem;
        }
        .all_img img:nth-child(2n){
            float: left;
        }
        .all_img img:nth-child(2n+1){
            float: right;
        }
        .details{
            padding-top: 0.3rem;
            width: 70%;
            height: auto;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 0.5rem;
            font-size: 0.7rem;
            position: absolute;
            top:200px;
            z-index: 998;
        }
        .details_item{
            height: 3rem;
            border-bottom: 1px solid #999;
        }
        .icon_img{
            width: 3rem;
            /*background: url(__IMAGE__/lvyou/one.png) no-repeat center;*/
            background-size: 1.5rem 1.5rem;
        }
        /*.icon_img2{*/
            /*width: 3rem;*/
            /*background: url(__IMAGE__/lvyou/three.png) no-repeat center;*/
            /*background-size: 1.5rem 1.5rem;*/
        /*}*/
        /*.icon_img3{*/
            /*width: 3rem;*/
            /*background: url(__IMAGE__/lvyou/two.png) no-repeat center;*/
            /*background-size: 1.5rem 1.5rem;*/
        /*}*/
        .details .no_border{
            height: 3rem;
            border-bottom:none;
        }
        .footer{
            position: absolute;
            bottom: -2rem;
            height: 2rem;
            padding: 0;
            color: #fff;
            font-size: 0.5rem;
            background-color: transparent;
            line-height: 2rem;
        }
        .footer .flex-con{
            height: 100%;
        }
        .footer img{
            border-radius: 50%;
            height: 0.55rem;
            width: 0.55rem;
            margin-top: 0.7rem;
            background: rgba(255, 255, 255, 0.6);
        }
        .footer img.left_img{
            float: left;
        }
        .footer img.right_img{
            float: left;
        }
        .hidden{
            display: none;
        }
        .mengban:before {
            content: ' ';
            position: fixed;
            z-index: 997;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: url('__IMAGE__/lvyou/mengban.png') center 0 no-repeat;
            background-size: cover;
        }
        .mengban{
            /*background: url(__IMAGE__/lvyou/mengban.png) no-repeat center center;
                    background-size: cover;
            position: absolute;
            top:0;
                    left: 0;
            z-index: 997;*/
            width: 100%;
            height: 100%;
            margin: 0;
        }
        .show{
            height: 5rem;
            width: 5rem;
            border-radius: 0.5rem;
            background-color: red;
            position: absolute;
            top:3rem;
            left: 15%;
            z-index: 999;
        }
        .show img{
            height: 5rem;
            width: 5rem;
            border-radius: 0.5rem;
        }

    </style>
</head>
<body>
<div class="select">选择你的梦想旅行目的地和行为</div>
<div class="all_img">
    {volist name='citys' id='city'}
    <img onclick="open_detail(this)" name="{$city.city_id}" tapmode='active' src="/{$city.city_thumb}" alt="">
    {/volist}

    {volist name='citys' id='city'}
    <div class="details hidden todo_{$city.city_id}">
        <?php $begin=0; ?>
        {volist name='dos' id='do'}
        {if $do.city_id==$city.city_id}
        <?php ++$begin; ?>
        <div class="flex-wrap {if $begin==3}no_border{else}details_item{/if}" onclick="makePic(this);" name="{$do.behavior_id}">
            <div class="icon_img" style="background: url(/{$do.behavior_img}) no-repeat center;background-size: 1.5rem 1.5rem;"></div>
            <div class="flex-con"  style="align-self:center">
                {$do.behavior_name}
            </div>
        </div>
        {if $begin==3}<?php $begin=0; ?>{/if}
        {/if}
        {/volist}
        <div class="flex-wrap footer">
            <div class="flex-con">
                <img class="left_img" src="__IMAGE__/lvyou/top2.png" alt="">
                &nbsp;选择以上任一行为
            </div>
            <div class="no_select" onclick="noSelect()" tapmode='active'>
                &nbsp;都不选
                <img class="right_img" src="__IMAGE__/lvyou/no2.png" alt="">
            </div>
        </div>
    </div>
    {/volist}
</div>
<div class="mengban hidden"></div>
<div class="show hidden">
    <img src="" alt="" class="show_img">
</div>
</body>
<script type="text/javascript" src="__JS__/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="__JS__/api.js"></script>
<script type="text/javascript">
    apiready = function() {
//onclick="location.href = '{:U(\'home/City/first\')}';"
    };
    //------------ip---------------
    $.ajax({
        type:'post',
        url:"http://mww1.xuanwumobile.com/home/User/wapNum",
        data:'type=5',
        dataType:'JSON',
        success:function(res){

        },
        error:function(){

        }
    });
    //----------end-----------------
    function open_detail(el){
        var na = $api.attr(el,'name');
        var img_src=$api.attr(el,'src');
        $api.attr($api.dom('.show_img'),'src',img_src);
        $('.details').addClass('hidden');
        $api.removeCls($api.dom('.todo_'+na), 'hidden');
        $api.removeCls($api.dom('.mengban'), 'hidden');
        $api.removeCls($api.dom('.show'), 'hidden');
    }

    function noSelect(){
        $api.addCls($api.dom('.show'), 'hidden');
//        $api.addCls($api.dom('.details'), 'hidden');
        $('.details').addClass('hidden');
        $api.addCls($api.dom('.mengban'), 'hidden');
    }
    function makePic(el){
        var behav_id=$api.attr(el,'name');
        window.location.href = "{:U('home/City/first')}?behav_id=" + behav_id;
    }
</script>
</html>
